<template>
	<view class="wui-dropdown" :style="[dropdownHeightComputed]">
		<view class="drop" :style="[dropStyle, show?dropdownZindexComputed:{zIndex:1}]">
			<block v-for="(drop, index) in initData" :key="index">
				<view class="drop-item" :style="[dropdownHeightComputed]">
					<view
						class="drop-item-title"
						:style="[activeColorComputed, defaultColorComputed]"
						:class="[show && showIndex === index ? 'select-drop-item' : '']"
						@click="clickItem(index)"
					>
						<text>{{ drop.detailList[drop.defaultSelectedIndex].title }}</text>
						<text class="iconfont " :class="[show && showIndex === index ? 'rotate-icon' : '', 'icon-wui-down', 'animation']"></text>
					</view>

					<!-- 单列展示 -->
					<view
						class="drop-box line"
						v-if="drop.detailList && drop.detailList.length && drop.type == 'line'"
						:style="[dropdownHeightComputed, { transform: `translateY(${-drop.translateY}px)` }]"
						:class="[show && showIndex === index ? 'show-drop' : '']"
					>
						<block v-for="(dropItem, i) in drop.detailList" :key="i">
							<view
								class="line-item"
								:style="[activeColorComputed, defaultColorComputed, dropdownHeightComputed]"
								:class="[drop.defaultSelectedIndex === i ? 'drop-box-active' : 'drop-box-default']"
								@click="clickDropdownItem(index, i)"
							>
								<text>{{ dropItem.title }}</text>
								<text :style="[activeColorComputed, defaultColorComputed]" class="iconfont icon-wui-success"></text>
							</view>
						</block>
					</view>

					<!-- 块级展示 -->
					<!-- <view
						class="drop-box line-box"
						v-if="drop.detailList && drop.detailList.length && drop.type == 'line-box'"
						:style="{ transform: `translateY(${-drop.translateY}px)` }"
						:class="[show && showIndex === index ? 'show-drop' : '']"
					>
						<block v-for="(dropItem, i) in drop.detailList" :key="i">
							<view
								class="box-item-display "
								:class="[drop.defaultSelectedIndex === i ? 'line-box-active' : 'line-box-default']"
								@click="clickDropdownItem(index, i)"
								:style="[activeColorComputed, defaultColorComputed]"
							>
								<view class="line-box-item">
									<text>{{ dropItem.title }}</text>
								</view>
							</view>
						</block>
					</view> -->

					<!-- 块级均匀展示 -->
					<view
						class="drop-box line-flexbox"
						v-if="drop.detailList && drop.detailList.length && drop.type == 'line-flexbox'"
						:style="{ transform: `translateY(${-drop.translateY}px)` }"
						:class="[show && showIndex === index ? 'show-drop' : '']"
					>
						<block v-for="(dropItem, i) in drop.detailList" :key="i">
							<view
								class="line-flexbox--base"
								:style="[dropdownHeightComputed, activeColorComputed, defaultColorComputed]"
								:class="[drop.defaultSelectedIndex === i ? 'line-flexbox-active' : 'line-flexbox-default']"
								@click="clickDropdownItem(index, i)"
							>
								<view class="line-box-item">
									<text>{{ dropItem.title }}</text>
								</view>
							</view>
						</block>
						<!-- 补空的盒子 -->
						<view :class="[dropdownHeightComputed]" class="line-flexbox--base empty" v-for="(emptyNumber, i) in drop.emptyNumber" :key="i"></view>
					</view>
				</view>
			</block>
		</view>
		<view class="mask" :style="[maskZindexComputed]" :class="[show ? 'mask-show' : 'mask-hidd']" @click="show = false"></view>
	</view>
</template>

<script>
export default {
	name: 'w-dropdown',
	props: {
		dropList: {
			type: Array,
			default: () => []
		},
		
		dropdownHeight: {
			type: [String, Number],
			default: 80
		},
		activeColor: {
			type: String,
			default: '#f88870'
		},
		defaultColor: {
			type: String,
			default: '#333'
		}
	},
	data() {
		return {
			show: false,
			showIndex: 0,
			dropStyle: {}
		};
	},
	watch: {
		show(val) {
			if (val) {
				this.selectorQuery('.drop-box', data => {
					if (data[this.showIndex]) {
						this.dropStyle = {
							height: data[this.showIndex].height + uni.upx2px(this.dropdownHeight) + 'px'
						};
					}
				});
			} else {
				this.dropStyle = {
					height: uni.upx2px(this.dropdownHeight) + 'px'
				};
			}
		}
	},

	computed: {
		initData() {
			this.dropList.forEach(item => {
				// 计算单行多个展示补齐空盒子
				if (item.type === 'line-flexbox' && item.detailList && item.detailList.length) {
					if (item.detailList.length % 3 > 0) item.emptyNumber = 3 - (item.detailList.length % 3);
				}
				// 计算每个下拉模块展示的高度
				if (item.detailList && item.detailList.length) item.translateY = item.detailList.length * uni.upx2px(this.dropdownHeight);
			});
			return this.dropList;
		},
		dropdownHeightComputed() {
			return {
				'--dropdown-height': uni.upx2px(this.dropdownHeight) + 'px'
			};
		},
		activeColorComputed() {
			return {
				'--active-color': this.activeColor
			};
		},
		defaultColorComputed() {
			return {
				'--default-color': this.defaultColor
			};
		},
		dropdownZindexComputed() {
			return {
				zIndex: this.uniWuiConfig.zIndex.dropdown
			};
		},
		maskZindexComputed() {
			return {
				'--mask-index': this.uniWuiConfig.zIndex.dropdown - 1
			};
		}
	},

	methods: {
		clickItem(index) {
			this.showIndex = index;
			this.show = !this.show;

			// 向父级传递当前点开的菜单
			if (this.show) this.$emit('clickMenu', index);
		},
		// 选中子元素(index=父级的索引 i=自己的索引)
		clickDropdownItem(index, i) {
			this.initData[index].defaultSelectedIndex = i;
			this.show = !this.show;
			let result = {};
			this.initData.forEach(item => {
				if (item.detailList && item.detailList.length) result[item.key] = item.detailList[item.defaultSelectedIndex].value;
			});
			this.$emit('clickDropdownItem', result);
		},
		// 元素选择
		selectorQuery(dom, callback = () => {}) {
			const query = uni.createSelectorQuery().in(this);
			query
				.selectAll(dom)
				.boundingClientRect(data => {
					callback(data);
				})
				.exec();
		}
	}
};
</script>

<style lang="scss" scoped>
.wui-dropdown {
	position: relative;
	height: var(--dropdown-height);
}

.drop {
	position: absolute;
	width: 100%;
	top: 0;
	z-index: 999;
	display: flex;
	justify-content: space-between;
	overflow: hidden;
	transition: all .3s;
	.drop-item {
		flex: 1;
		height: var(--dropdown-height);
		background-color: #fff;
		.drop-item-title {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			color: var(--default-color);
			.rotate-icon {
				transform: rotate(180deg);
			}
			.iconfont {
				font-size: 24rpx;
				margin-left: 10rpx;
			}
			.animation {
				transition: transform 0.4s;
			}
		}
		.select-drop-item {
			color: var(--active-color);
		}
	}
}

// 单行展示
.line {
	.line-item {
		height: var(--dropdown-height);
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		padding: 0 40rpx;
		align-items: center;
	}
}

// 单行多个展示
// .line-box {
// 	padding: 20rpx;

// 	.box-item-display {
// 		display: inline-block;
// 		vertical-align: text-bottom;
// 		padding: 10rpx 20rpx;
// 		margin: 10rpx 16rpx;
// 	}

// 	.line-box-item {
// 		display: flex;
// 		justify-content: center;
// 		align-items: center;
// 	}

// 	.line-box-active {
// 		border: 2rpx solid var(--active-color);
// 		color: var(--active-color);
// 	}
// 	.line-box-default {
// 		border: 2rpx solid #ccc;
// 		border-radius: 8rpx;
// 		color: var(--default-color);
// 	}
// }

// 块级均匀展示
.line-flexbox {
	padding: 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;

	.line-flexbox--base {
		height: var(--dropdown-height);
		width: 30%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 10rpx 0;
	}

	.line-flexbox-active {
		border: 2rpx solid var(--active-color);
		color: var(--active-color);
	}
	.line-flexbox-default {
		border: 2rpx solid #dedede;
		color: var(--default-color);
	}
}

.drop-box {
	position: absolute;
	top: var(--dropdown-height);
	width: 100%;
	left: 0;
	z-index: -1;
	background-color: #f6f7f8;
	transition: all 0.6s;
	.drop-box-active {
		color: var(--active-color);

		.iconfont {
			color: var(--active-color);
		}
	}
	.drop-box-default {
		color: var(--default-color);
		.iconfont {
			color: transparent;
		}
	}
}

.show-drop {
	transform: translateY(0rpx) !important;
}

.mask {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: all 0.6s;
}

.mask-show {
	z-index: var(--mask-index);
	background-color: rgba(0, 0, 0, 0.5);
}
.mask-hidd {
	z-index: -10;
	background-color: transparent;
}
</style>
